<script setup>
import { ref } from "vue";
import HeaderFixed from "./components/HeaderFiexed.vue";
import AsideMenu from "./components/AsideMenu.vue"
import MainSearch from "./components/MainSearch.vue"
import HotList from "./components/HotList.vue"
import MainList from "./components/MainList.vue"
const menuWidth = ref("60px");
const handleMenuWidthChange = (width) => {
  menuWidth.value = width;
};
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="menuWidth">
       <AsideMenu :menuWidth="menuWidth" @change-menu-width="handleMenuWidthChange"/>
      </el-aside>
      <el-container>
        <el-header>
          <HeaderFixed />
        </el-header>
        <el-main>
            <MainSearch />
            <HotList />
            <MainList />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.el-aside {
  background-color: #f4f7ff;
  height: 100vh;
  transition: all 0.3s;
}
.el-header {
  height: 40px;
  width: 100%;
  padding: 0 15px;
}
</style>
